<template>
  <view class="content">
    <!-- 顶部标题 -->
    <view class="header">
      <h2 class="title">中国互联网络信息中心</h2>
    </view>

    <!-- 主内容区 -->
    <view class="loginBox">
      <h3 class="section-title">密码修改</h3>

      <view class="input-group">
        <!-- 旧密码输入 -->
        <uv-input
            customStyle="margin-bottom:30rpx;"
            prefixIcon="account-fill"
            prefixIconStyle="color:white;margin-left:20rpx;margin-right:20rpx;"
            shape="circle"
            placeholder="旧密码"
            border="surround"
            v-model="oldPassword"
            :focus="false"
        >
        </uv-input>

        <!-- 新密码输入与强度校验 -->
        <view class="password-group">
          <uv-input
              :password="true"
              customStyle="margin-bottom:10rpx;"
              prefixIcon="lock-fill"
              prefixIconStyle="color:white;margin-left:20rpx;margin-right:20rpx;"
              shape="circle"
              placeholder="新密码"
              border="surround"
              v-model="newPassword"
              @input="checkPasswordStrength"
          >
          </uv-input>

          <!-- 密码强度指示器 -->
          <view class="strength-indicator">
            <view class="strength-bar" :class="strengthClass" :style="{ width: strengthPercentage }"></view>
            <view class="strength-text">{{ strengthText }}</view>
          </view>

          <!-- 密码规则动态提示 -->
          <view class="validation-tips">
            <view class="rule-item" :class="{ 'valid': hasMinLength }">
              <text class="rule-icon">{{ hasMinLength ? '✓' : '✗' }}</text>
              <text>至少8个字符</text>
            </view>
            <view class="rule-item" :class="{ 'valid': hasUpperCase }">
              <text class="rule-icon">{{ hasUpperCase ? '✓' : '✗' }}</text>
              <text>包含大写字母</text>
            </view>
            <view class="rule-item" :class="{ 'valid': hasLowerCase }">
              <text class="rule-icon">{{ hasLowerCase ? '✓' : '✗' }}</text>
              <text>包含小写字母</text>
            </view>
            <view class="rule-item" :class="{ 'valid': hasNumber }">
              <text class="rule-icon">{{ hasNumber ? '✓' : '✗' }}</text>
              <text>包含数字</text>
            </view>
            <view class="rule-item" :class="{ 'valid': hasSpecialChar }">
              <text class="rule-icon">{{ hasSpecialChar ? '✓' : '✗' }}</text>
              <text>包含特殊字符</text>
            </view>
          </view>
        </view>

        <!-- 确认新密码输入 -->
        <uv-input
            :password="true"
            prefixIcon="lock-fill"
            prefixIconStyle="color:white;margin-left:20rpx;margin-right:20rpx;"
            shape="circle"
            placeholder="确认新密码"
            border="surround"
            v-model="newPasswordConfirm"
            @blur="validatePasswordsMatch"
        >
        </uv-input>

        <!-- 密码匹配提示 -->
        <view class="password-match-tip" v-if="passwordsDoNotMatch">
          <text class="error-text">两次输入的密码不一致</text>
        </view>
      </view>

      <!-- 提交按钮 -->
      <button
          type="primary"
          @click="submitForm"
          :class="{ 'btn-primary': canSubmit, 'btn-disabled': !canSubmit }"
          :disabled="!canSubmit"
      >确认修改</button>
    </view>
  </view>
</template>

<script>
import util from '../../api/util';
import api from "@/api/api";
export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
      newPasswordConfirm: '',
      strength: 0,
      strengthText: '请输入密码',
      strengthClass: 'strength-initial',
      hasMinLength: false,
      hasUpperCase: false,
      hasLowerCase: false,
      hasNumber: false,
      hasSpecialChar: false,
      passwordsDoNotMatch: false
    };
  },
  computed: {
    canSubmit() {
      // 提交条件：所有输入框有值、密码强度足够、两次密码一致
      return (
          this.oldPassword &&
          this.newPassword &&
          this.newPasswordConfirm &&
          this.strength >= 60 &&
          !this.passwordsDoNotMatch
      );
    },
    strengthPercentage() {
      // 计算强度条宽度百分比
      return `${this.strength}%`;
    }
  },
  methods: {
    checkPasswordStrength() {
      // 重置所有校验标志
      this.strength = 0;
      this.hasMinLength = false;
      this.hasUpperCase = false;
      this.hasLowerCase = false;
      this.hasNumber = false;
      this.hasSpecialChar = false;

      // 检查最小长度
      if (this.newPassword.length >= 8) {
        this.hasMinLength = true;
        this.strength += 20;
      }

      // 检查包含大写字母
      if (/[A-Z]/.test(this.newPassword)) {
        this.hasUpperCase = true;
        this.strength += 20;
      }

      // 检查包含小写字母
      if (/[a-z]/.test(this.newPassword)) {
        this.hasLowerCase = true;
        this.strength += 20;
      }

      // 检查包含数字
      if (/[0-9]/.test(this.newPassword)) {
        this.hasNumber = true;
        this.strength += 20;
      }

      // 检查包含特殊字符
      if (/[^A-Za-z0-9]/.test(this.newPassword)) {
        this.hasSpecialChar = true;
        this.strength += 20;
      }

      // 设置强度文本和颜色
      if (this.strength <= 20) {
        this.strengthText = '非常弱';
        this.strengthClass = 'strength-weak';
      } else if (this.strength <= 40) {
        this.strengthText = '弱';
        this.strengthClass = 'strength-weak';
      } else if (this.strength <= 60) {
        this.strengthText = '中等';
        this.strengthClass = 'strength-medium';
      } else if (this.strength <= 80) {
        this.strengthText = '强';
        this.strengthClass = 'strength-strong';
      } else {
        this.strengthText = '非常强';
        this.strengthClass = 'strength-very-strong';
      }

      // 实时检查密码匹配
      this.validatePasswordsMatch();
    },
    validatePasswordsMatch() {
      this.passwordsDoNotMatch = (this.newPassword !== this.newPasswordConfirm) &&
          this.newPasswordConfirm.length > 0;
    },
    async submitForm() {
      // 表单验证
      if (!this.oldPassword) {
        this.showToast('请输入旧密码', 'error');
        return;
      }

      if (this.newPassword === this.oldPassword) {
        this.showToast('新密码不能与旧密码相同', 'error');
        return;
      }

      if (this.newPassword !== this.newPasswordConfirm) {
        this.showToast('两次输入的新密码不一致', 'error');
        return;
      }

      if (this.strength < 60) {
        this.showToast('密码强度不足，请使用更强的密码', 'warning');
        return;
      }

      // 提交修改请求
      const params = {
        oldPassword: this.oldPassword,
        newPassword: this.newPassword
      };

      try {
        const data = await util.request(api.ChangePassword, params, 'POST');
        this.showToast('密码修改成功', 'success');
        setTimeout(() => {
          uni.navigateTo({
            url: './login'
          });
        }, 1500);
      } catch (error) {
        this.showToast(error.message || '密码修改失败，请重试', 'error');
      }
    },
    showToast(message, type = 'info') {
      // 统一提示方法
      uni.showToast({
        title: message,
        icon: type === 'error' ? 'none' : type || 'success',
        duration: 2000
      });
    }
  }
}
</script>

<style lang="scss">
/* 全局样式重置 */
page {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  font-size: 28rpx;
  color: #333;
}

.content {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to bottom, #1a73e8, #4285f4);
  background-size: 100% 100%;
  overflow: hidden;
}

/* 头部样式 */
.header {
  padding-top: 70rpx;
  margin-bottom: 40rpx;
}

.title {
  text-align: center;
  margin-bottom: 30rpx;
  padding-top: 20rpx;
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* 登录框样式 */
.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 30rpx;
  padding: 60rpx;
  box-sizing: border-box;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  text-align: center;
  margin-bottom: 40rpx;
  color: #1a73e8;
  font-size: 36rpx;
  font-weight: 600;
}

/* 输入组样式 */
.input-group {
  margin-bottom: 40rpx;
}

/* 密码组样式 */
.password-group {
  margin-bottom: 40rpx;
}

/* 密码强度指示器样式 */
.strength-indicator {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  margin-bottom: 20rpx;
  height: 30rpx;
}

.strength-bar {
  flex: 1;
  height: 100%;
  border-radius: 15rpx;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.strength-text {
  margin-left: 15rpx;
  font-size: 24rpx;
  color: #666;
  white-space: nowrap;
}

.strength-initial {
  background-color: #e0e0e0;
}

.strength-weak {
  background-color: #ff4d4f;
}

.strength-medium {
  background-color: #faad14;
}

.strength-strong {
  background-color: #52c41a;
}

.strength-very-strong {
  background-color: #1890ff;
}

/* 密码规则提示样式 */
.validation-tips {
  margin-top: 10rpx;
}

.rule-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.rule-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border-radius: 50%;
  font-size: 20rpx;
}

.rule-item.valid .rule-icon {
  background-color: #52c41a;
  color: white;
}

.rule-item:not(.valid) .rule-icon {
  background-color: #ff4d4f;
  color: white;
}

/* 密码匹配提示样式 */
.password-match-tip {
  margin-top: 10rpx;
  font-size: 24rpx;
}

.error-text {
  color: #ff4d4f;
}

/* 按钮样式 */
button {
  height: 88rpx;
  line-height: 88rpx;
  font-size: 32rpx;
  border-radius: 44rpx;
  background-color: #1a73e8;
  color: white;
  margin-top: 40rpx;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(26, 115, 232, 0.3);
}

.btn-primary {
  background-color: #1a73e8;
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(26, 115, 232, 0.3);
}

.btn-primary:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 8rpx rgba(26, 115, 232, 0.2);
}

.btn-disabled {
  background-color: #cccccc;
  color: #ffffff;
  box-shadow: none;
  cursor: not-allowed;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .loginBox {
    padding: 40rpx;
  }

  .section-title {
    font-size: 32rpx;
  }

  .strength-indicator {
    height: 24rpx;
  }

  .strength-text {
    font-size: 20rpx;
    margin-left: 10rpx;
  }
}
</style>